<script setup lang="ts">
import useHomeStore from "@/pinia/modules/homeStore/homeStore.ts";
import { storeToRefs } from "pinia";
import type { Ref } from "vue";
import type { HotItem } from "@/types/homeTypes/homeTypes.ts";
import RegionSkeleton from "@/views/home/components/regionSkeleton/regionSkeleton.vue";


const homeStore = useHomeStore();

const { hotList }: { hotList: Ref<HotItem[]> } = storeToRefs(homeStore);

/*调用函数获取人气推荐*/
homeStore.fetchHotList();
</script>

<template>
   <panel title="人气推荐" sub-title="人气爆款 不容错过">
      <template #right>
         <more path="/"></more>
      </template>
      <el-skeleton animated :count="4" :loading="!hotList.length">
         <template #template>
            <region-skeleton></region-skeleton>
         </template>
         <template #default>
            <ul class="goods-list">
               <li v-for="item in hotList" :key="item.id">
                  <RouterLink to="/">
                     <img v-lazy="item.picture" alt="">
                     <p class="name">{{ item.title }}</p>
                     <p class="desc">{{ item.alt }}</p>
                  </RouterLink>
               </li>
            </ul>
         </template>
      </el-skeleton>
   </panel>
</template>

<style scoped lang="less">
.goods-list {
   display: flex;
   justify-content: space-between;
   height: 426px;

   li {
      width: 306px;
      height: 406px;
      .hoverShadow();

      img {
         width: 306px;
         height: 306px;
      }

      p {
         font-size: 22px;
         padding-top: 12px;
         text-align: center;
      }

      .desc {
         color: #999;
         font-size: 18px;
      }
   }

}
:deep(.el-skeleton){
   display: flex;
   justify-content: space-between;
}
</style>
